<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>标题</title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<link rel='stylesheet' href='../css/fyz.public.style.css' />
<script type='text/javascript' src='../js/jquery-1.8.3.min.js'></script>
</head>
<body>
<style type="text/css">
div.TopBotInfiniterScrollBut{width:450px; height:35px; background:#F4F4F4; position:relative; border:1px solid #CCCCCC; border-bottom:none; margin:20px auto 0px;}
div.TopBotInfiniterScrollBut a{display:block; width:9px; height:5px; position:absolute; top:14px;}
a.TopBotInfiniterScrollButTop{right:8px; background:red;}
a.TopBotInfiniterScrollButBot{right:25px; background:blue;}
/**/
div.TopBotInfiniterScroll{width:450px; height:176px; overflow:hidden; border:1px solid #CCCCCC; border-top:none; position:relative; margin:0px auto;}
ul.TopBotInfiniterScroll{padding-left:10px; width:100%; position:absolute; top:0px; left:0px;}
ul.TopBotInfiniterScroll li{height:35px; line-height:35px;}
</style>
<div class="TopBotInfiniterScrollBut">
    <a href="javascript:;" class="TopBotInfiniterScrollButTop"></a>
    <a href="javascript:;" class="TopBotInfiniterScrollButBot"></a>
</div>
<div class="TopBotInfiniterScroll">
    <ul class="TopBotInfiniterScroll">
        <li class='con'>我是第一个文字</li>
        <li class='con'>我是第二个文字</li>
        <li class='con'>我是第三个文字</li>
        <li class='con'>我是第四个文字</li>
        <li class='con'>我是第五个文字</li>
        <li class='con'>我是第六个文字</li>
    </ul>
</div>
<script type="text/javascript">
(function($){
    $.fn.extend({
        'TopBotInfiniterScroll':function(options){
			var opts = $.extend({},TopBotInfiniterScroll_Defaluts,options);
			var $this = $(this);
			var $thisAll = $(this).find('*');
			opts.Size = $this.find('li.con').size();
			if(opts.Size>opts.ShowSum){
				opts.LiHeight = $this.find('li.con').outerHeight(true);			
				$(opts.scrollTopButTop).click(function(){opts.OnOff = true;});
				$(opts.scrollTopButBot).click(function(){opts.OnOff = false;});
				if(opts.OnOff){
					partComOne();
					opts.Top = -opts.LiHeight+'px';
					partCom();
				}else{
					opts.Top = 0+'px';
					partCom();
				};
				if(opts.autoPlay){
					function autoPlay(){		
						clearInterval(opts.Timer);
						opts.Timer = setInterval(function(){
							opts.Click++;
							if(opts.Click == opts.LiHeight){
								if(opts.OnOff){
									partComOne();
								}else{
									opts.FirstLi = $($this).find('li.con').eq(0);
									$($this).append(opts.FirstLi);
								};
								opts.Top = 0+'px';
								partCom();
								opts.Click = 0;
							};
							if(opts.OnOff){opts.Top = opts.Click-opts.LiHeight+'px';}else{opts.Top = '-'+opts.Click+'px';};
							partCom();
						},opts.setInterValTime);
					};
					autoPlay();
					function partCom(){$($this).css('top',opts.Top);};
					function partComOne(){
						opts.LastLi = $($this).find('li.con').eq(opts.Size-1);
						$($this).prepend(opts.LastLi);
					};
					function clearIntervalFun(clearIntervalObj){
						$(clearIntervalObj).mouseover(function(){clearInterval(opts.Timer);});
						$(clearIntervalObj).mouseout(function(){autoPlay();});
					};
					clearIntervalFun($this);
				};
			};
		}
    });
    var TopBotInfiniterScroll_Defaluts = {
		Click:0,
		Top:0,
		ShowSum:5,
		setInterValTime:30,
		Size:'',
		LiHeight:'',
		FirstLi:'',
		LastLi:'',
		Timer:null,
		OnOff:false,
		autoPlay:true,
		scrollTopButTop:'',
		scrollTopButBot:''
	};
}(window.jQuery));
</script>
<script type="text/javascript">
$(function(){
    $("ul.TopBotInfiniterScroll").TopBotInfiniterScroll({        
        ShowSum:5,
        setInterValTime:35,
		autoPlay:true,//是否自动滚
		OnOff:false,//是否向上滚, 默认false向上滚,
        scrollTopButTop:'a.TopBotInfiniterScrollButTop',
        scrollTopButBot:'a.TopBotInfiniterScrollButBot'
    });
});
</script>
</body>
</html>